import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Input, Icon, message, Button, Form } from 'antd';
import styles from '../index.less';
import AuctionModal from '../../AuctionModal';
import CoverModal from '../../AuctionModal/CoverModal';
import AuctionImageModal from '../../AuctionModal/AuctionImageModal';

const FormItem = Form.Item;
const { TextArea } = Input;

@connect(state => ({

}))
@Form.create()

export default class BodyAddShopContent extends PureComponent {
  state = {
    b2cShop:true,
    level:0,
    shopId:'',
    shop_desc:'',
    shopImg:'',
    shop_logo:'',
    shop_title:'',
    shopUrl:'',
    type:'',
    desc:''
  }
  componentDidMount() {
    const propsData = this.props.value.data.shopDetail[0];
    this.setState({
      b2cShop: propsData.b2cShop,
      level: propsData.level,
      shopId: propsData.shopId,
      shop_desc: propsData.shop_desc,
      shopImg: propsData.shopImg,
      shop_logo: propsData.shop_logo,
      shop_title: propsData.shop_title,
      shopUrl: propsData.shopUrl,
      type: propsData.type,
      desc: propsData.desc
    });
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.k === nextProps.currentKey) {
      const nicaiCrx = document.getElementById('nicaiCrx');
      nicaiCrx.addEventListener('setShopDetail', this.setShopDetail);
       if (!this.state.nicaiCrx) {
        this.setState({ nicaiCrx }, () => {
          this.handleGetAddShopContent();
        });
      }
    }
  }
  shopIdChange = (e) => {
    this.setState({
      shopId: e.target.value
    });
  }
  shopDescChange = (e) => {
    this.setState({
      desc: e.target.value
    })
  }
  setShopDetail = (e) => {
    const data = JSON.parse(e.target.innerText);
    console.log(data);
    const item = data.data.itemList[0];
    this.setState({
      b2cShop: item.b2cShop,
      level: item.level,
      shopId: item.shopSid,
      shop_desc: this.state.desc,
      shopImg: item.shopImg,
      shop_logo: item.shopLogo,
      shop_title: item.shopTitle,
      shopUrl: item.shopUrl,
      type: item.type
    })

    if (this.props.onChange) this.props.onChange(this.state);
  }

  handleOk = () => {
    console.log(this.state);
    const data = this.state;
    if (this.props.onChange) this.props.onChange(this.state);
  }

  handleRequestNicaiCrx = (params) => {
    this.state.nicaiCrx.innerText = JSON.stringify(params);
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('taobaoRequest', true, true);
    this.state.nicaiCrx.dispatchEvent(customEvent);
  }
  handleGetAddShopContent = () => {
    this.handleRequestNicaiCrx({
      url: `https://resource.taobao.com/shop/query?shopId=${this.state.shopId}&__version__=3.0`,
      type: 'GET',
      // data: {
      //   q: '',
      //   __version__: '3.0',
      //   resourceType: 'Pic',
      //   ...params,
      // },
      actionName: 'setShopDetail',
    });
  }
  render() {
    return (
      <div>
        <div>
          <p style={{lineHeight:'32px'}}>店铺shopId</p>
          <Input placeholder={'请输入店铺shopId'} value={this.state.shopId} onChange={this.shopIdChange} />
          <p style={{fontSize:'12px',color:'rgb(102,102,102)',marginTop:'5px'}}>请填写店铺 shopid（chrome浏览器：店铺首页→鼠标右键→查看网页源代码→shopId=XXXXXX）</p>
        </div>
        <div style={{margin: '10px 0'}}>
          <p style={{lineHeight:'32px'}}>店铺描述</p>
          <Input placeholder={'请输入店铺描述'} value={this.state.desc} onChange={this.shopDescChange}  />
        </div>
        <div style={{overflow:'hidden'}}>
          <Button type="primary" style={{ float: 'right' }} onClick={this.handleOk}>确定</Button>
        </div>
      </div>
    );
  }
}
